<template>
  <div class="zm-box4">
    <div class="zm-box4-bg">
      <div class="zm-box4-bg-row">
        <div class="zm-box4-bg-lt"></div>
        <div class="zm-box4-bg-mt"></div>
        <div class="zm-box4-bg-rt"></div>
      </div>
      <div class="zm-box4-bg-row">
        <div class="zm-box4-bg-lm"></div>
        <div class="zm-box4-bg-mm"></div>
        <div class="zm-box4-bg-rm"></div>
      </div>
      <div class="zm-box4-bg-row">
        <div class="zm-box4-bg-lb"></div>
        <div class="zm-box4-bg-mb"></div>
        <div class="zm-box4-bg-rb"></div>
      </div>
    </div>
    <div class="zm-box4-title">{{title}}</div>
    <div class="zm-box4-main">
      <slot />
    </div>
  </div>
</template>

<script>
/*
  功能描述  ZmBox4
  创建人    zgf
  更新时间  2019/06/04
  备注      
*/
export default {
  name: "ZmBox4",
  props: {
    title: {
      type: String,
      default: ""
    }
  },
  data() {
    return {};
  },
  mounted() {},
  methods: {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style  lang="less">
@import "../../css/var.less";
@import "../../css/mixin.less";
.zm-box4 {
  height: 16rem;
  position: relative;
  &-bg {
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    z-index: 0;
    flex-direction: column;
    &-l,
    &-m,
    &-r {
      height: 16rem;
      width: 16rem;
      background-image: url(../../../public/images/content-box1.png);
      background-size: auto 100%;
      background-position: left top;
    }
    &-m {
      flex: 1;
      width: 0;
      background-size: 10000% 100%;
      background-position: center top;
    }
    &-r {
      background-size: auto 100%;
      background-position: right top;
    }
    &-row{
      display: flex;
      &:nth-child(2){
          flex: 1;
      }
    }

    &-lt,&-mt,&-rt,&-lm,&-mm,&-rm,&-lb,&-mb,&-rb{
      background-image: url(../../../public/images/content-box1.png);
      background-size: 500px 270px;
      background-repeat: no-repeat;
    }
    &-lt {
      width: 250px;
      height: 80px;
      background-position: left top;
    }
    &-mt {
      flex: 1;
      background-position: center top;
      background-size: 50000px 270px;
    }
    &-rt {
      width: 250px;
      height: 80px;
      background-position: right top;
    }

    &-lm {
      width: 250px;
      background-position: left center;
      background-size: 500px 270000px;
    }
    &-mm {
      flex: 1;
      background-position: center center;
      background-size: 50000px 270000px;
    }
    &-rm {
      width: 250px;
      background-position: right center;
      background-size: 500px 270000px;
    }

    &-lb {
      width: 250px;
      background-position: left bottom;
    }
    &-mb {
      flex: 1;
      background-position: center bottom;
      background-size: 50000px 270px;
    }
    &-rb {
      width: 250px;
      height: 80px;
      background-position: right bottom;
    }
  }
  &-title {
    position: absolute;
    left: 2.5rem;
    width: 8rem;
    text-align: center;
    top: -0.3rem;
    font-size: 0.9rem;
    color: #84aefc;
    font-weight: bold;
  }
  &-main {
    position: relative;
    z-index: 2;
    margin: 1rem 0.5rem 0.5rem 0.5rem;
    height: calc(100% - 2rem);
    overflow-y: auto;
    .nativeScroll();
  }
}
</style>
